<template>
  <div class="startFinishWork-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button :icon="Refresh" plain type="primary" @click="query">
          查询
        </el-button>
        <el-button :icon="Tickets" plain type="primary" @click="shangGong">
          上工
        </el-button>
        <!-- :icon="Memo" -->
        <el-button
          :disabled="!currentXz"
          plain
          type="primary"
          @click="shangFuzhu"
        >
          上辅操
        </el-button>
        <el-button
          :disabled="!currentXz"
          :icon="Bottom"
          plain
          type="warning"
          @click="xiaFuzhuBtn"
        >
          下辅操
        </el-button>
        <el-button
          :disabled="!currentXz"
          :icon="Position"
          plain
          type="warning"
          @click="xiagong"
        >
          下工
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '6px 0px' }"
      :data="sgInfoList"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="设备" prop="invcode">
        <template #default="scope">
          <el-row>
            <span>{{ scope.row.equipCode }}</span>
          </el-row>
          <el-row>
            <span style="font-size: 15px; font-weight: 700; color: #000">
              {{ scope.row.equipName }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="班次" prop="invcode">
        <template #default="scope">
          <el-row>
            <span style="font-size: 15px; font-weight: 700; color: #000">
              {{ scope.row.banciName }}
            </span>
          </el-row>
          <el-row>
            <span>{{ scope.row.banciDate }}</span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="enumName" width="110" />
      <el-table-column label="机长" prop="invcode">
        <template #default="scope">
          <el-row>
            <span>{{ scope.row.userid }}</span>
          </el-row>
          <el-row>
            <span style="font-size: 15px; font-weight: 700; color: #000">
              {{ scope.row.userName }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="辅操" prop="invcode">
        <template #default="scope">
          <el-row
            v-for="(item, index) in scope.row.equipmentFuzhus"
            :key="index"
          >
            <span>{{ item.fuUserName }}</span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="上机时间" prop="updateTime" width="280" />
    </el-table>
    <shangGongDialog
      ref="shangGongDialogRef"
      @success-callback="shangGongCallback"
    />
    <pickBanci ref="pickBanciRef" @success-callback="pickBanciCallback" />
    <pickPerson ref="pickPersonRef" @success-callback="pickPersonCallback" />
    <xiaFuzhu ref="xiaFuzhuRef" @success-callback="xiaFuzhuCallback" />
  </div>
</template>

<script setup>
  import { getSgInfoApi } from '@/api/equip/equip_api'
  import {
    Refresh,
    Tickets,
    // Memo,
    Bottom,
    Position,
  } from '@element-plus/icons-vue'
  import shangGongDialog from './modules/shangGongDialog.vue'
  import pickBanci from './modules/pickBanci.vue'
  import pickPerson from './modules/pickPerson.vue'
  import xiaFuzhu from './modules/xiaFuzhu.vue'
  import { xiagongApi } from '@/api/equip/equip_api'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const sgInfoList = ref()
  const shangGongDialogRef = ref()
  const pickBanciRef = ref()
  const pickPersonRef = ref()
  const currentXz = ref()
  const xiaFuzhuRef = ref()

  const getSgInfo = async () => {
    const { code, data } = await getSgInfoApi()
    if (code === 2000) {
      sgInfoList.value = data
    }
  }

  const query = () => getSgInfo()

  const handleCurrentChange = (rowData) => (currentXz.value = rowData)

  const shangGong = () => shangGongDialogRef.value.openDialog()

  const shangGongCallback = (value) => pickBanciRef.value.openDialog(value)

  const shangFuzhu = () => pickPersonRef.value.openDialog(currentXz.value)

  const pickPersonCallback = () => query()

  const pickBanciCallback = () => query()

  const xiaFuzhuBtn = () => xiaFuzhuRef.value.openDialog(currentXz.value)

  const xiaFuzhuCallback = () => query()

  const xiagong = async () => {
    const load = $baseLoading()
    try {
      const { code, msg } = await xiagongApi(currentXz.value)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        query()
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  onMounted(() => getSgInfo())
</script>

<style lang="scss" scoped>
  .startFinishWork-container {
    position: relative;
    background-image: linear-gradient(0deg, #191f34, #212232) !important;
  }
</style>
